import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import service from '../../../api/index'
interface Props {

}
function Echarts(props: Props) {

  var myChart: any = null;

  useEffect(() => {
    //发请求
    service.data.data_simpleData().then((res) => {
      var xAxisData = res.data.data.map((item: any) => {
        return item.x;
      })
      var seriesData = res.data.data.map((item: any) => {
        return item.val;
      })
      var paidata = res.data.data.map((item: any) => {
        return { value: item.val, name: item.x };
      })
      //绘图
      // drbw(xAxisData,seriesData);
      draw(paidata, xAxisData, seriesData);
    });
    //实例化echarts
    myChart = echarts.init(document.getElementById('charts') || document.body);
    //绘图

  }, [])

  // 绘图
  var draw = (paidata: any, xAxisData: any, seriesData: any) => {
    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['饼图', '价格', '销量']
      },
      xAxis: [
        {
          type: 'category',
          data: xAxisData,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '价格',
          min: 0,
          max: 250,
          interval: 50,
        },
        {
          type: 'value',
          name: '销量',
          min: 0,
          max: 25,
          interval: 5,
        }
      ],
      series: [

        // 玫瑰图
        {
          name: '饼图',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: paidata
        },


        // 折线图
        {
          name: '销量',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value: any) {
              return value as number;
            }
          },
          data: [15, 23, 22.4, 21.9, 13.5, 14.8, 25]
        }
      ]
    });
  }
  //绘图
  var drbw = (xAxisData: any, seriesData: any) => {
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例' //标题
      },
      tooltip: {},
      xAxis: { //x轴的刻度数据及设置
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        data: xAxisData
      },
      yAxis: { //y周的刻度数据及设置

      },
      series: [ //图标中的数据系列
        {
          name: '销量',
          type: 'bar',//'bar' , 'line' , 'pie'
          // data: [5, 20, 36, 10, 10, 20]
          data: seriesData
        }
      ]
    });
  }

  return (
    <div className='echarts'>
      <div id="charts" style={{ width: 1200, height: 500, margin: 10 }}  ></div>
    </div>
  );
}

export default Echarts;